<template>
  <div>
    <headeBar></headeBar>
    <div class="container">
      <el-container>
        <sidebar :activeIndex="activeIndex"></sidebar>
        <el-main class="container-content">
          <!--库存总览表格-->
          <el-table :data="tableData" border height="480" style="width: 100%" :row-class-name="tableRowClass">
            <el-table-column prop="code" label="零件编号" fixed align="center" width="130"/>
            <el-table-column prop="name" align="center" fixed label="零件名" width="130"/>
            <el-table-column prop="stock" align="center" label="库存" width="100"/>
            <el-table-column prop="threshold" align="center" label="警戒值" width="100"/>
            <el-table-column prop="unit" align="center" label="计量单位" width="100"/>
            <el-table-column prop="lastOperator" align="center" label="最后操作人员" width="125"/>
            <el-table-column prop="lastUpdate" align="center" label="最后更改时间" width="160"/>
            <el-table-column label="操作" align="center" width="180">
              <template slot-scope="scope">
                <el-button @click="addRecord(scope)" type="text" size="middle">新增记录</el-button>
                <el-button @click="viewRecord(scope)" type="text" size="middle">查看历史记录</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!--新增记录模态框-->
          <el-dialog :title="currentCompenent" :visible.sync="addRecordDialogVisible">
            <el-form :model="addRecordForm" status-icon :rules="addRecordRules" ref="form">
              <el-form-item label="数量" label-width="120px" prop="count">
                <el-input :placeholder="0+currentCompenentUnit" v-model="addRecordForm.count" @keyup.native="allowNumber" autocomplete="off" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="类型" label-width="120px" prop="type">
                <el-select v-model="addRecordForm.type" placeholder="入库/出库" style="width: 200px">
                  <el-option label="入库" value="1"></el-option>
                  <el-option label="出库" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注" label-width="120px">
                <el-input type="textarea" v-model="addRecordForm.memo" autocomplete="off" style="width: 400px"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addRecordDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="postRecordForm">确 定</el-button>
            </div>
          </el-dialog>

          <!--查看历史记录模态框-->
          <el-dialog :title="currentCompenent" :visible.sync="viewRecordDialogVisible" width="680px">
            <el-table :data="operationRecordData" border height="340" :row-class-name="recordRowClass">
              <el-table-column property="createdAt" label="日期" width="160" align="center"></el-table-column>
              <el-table-column property="count" label="数量" width="80" align="center"></el-table-column>
              <el-table-column property="unit" label="计量单位" width="80" align="center"></el-table-column>
              <el-table-column property="type" label="类型" width="100" align="center"></el-table-column>
              <el-table-column property="operatorName" label="操作员" width="100" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="viewMemoDialog(scope)" type="text" size="middle">查看备注</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--显示备注模态框-->
            <el-dialog width="500px" title="备注" :visible.sync="viewMemoDialogVisable" append-to-body>
              <span>{{memo? memo:'无备注'}}</span>
            </el-dialog>
          </el-dialog>


        </el-main>
      </el-container>


    </div>

  </div>
</template>

<script src="./overview.js"></script>

